// 把所有和更新角标相关的vue代码 放入混入文件

import { mapGetters } from 'vuex'

export default {
  // data() {},
  // methods: {},
  // created() {},
  computed: {
    ...mapGetters('cart', ['total']),
  },
  watch: {
    // 需求: 希望total发生变化, 就能直接影响购物车tab上角标  setTabbarBadge
    // 分析: 将来只要total一变化, 就需要调用方法更新角标 => watch
    // total() {}
    total: {
      // 一进入页面执行
      immediate: true,
      handler(newVal) {
        if (newVal > 0) {
          uni.setTabBarBadge({
            // 购物车是第二个(tabBar的哪一项，从左边算起，索引从0开始)
            index: 2,
            // 必须是字符串!!!
            text: '' + newVal,
          })
        } else {
          // 如果小于等于0, 需要移除角标
          uni.removeTabBarBadge({
            index: 2,
          })
        }
      },
    },
  },

  onShow() {
    // 这里简单实现,不做判断了
    uni.setTabBarBadge({
      index: 2,
      text: '' + this.$store.getters['cart/total'],
    })
  },
}
